<template>
	<view class="container">
		<!-- 登录logo -->
		<view class="logo">
			<image class="logoImage" :src="logoImage"></image>
		</view>

		<!-- 登录-->
		<view v-if="currentPage === 'login'">
			<view class="form-item">
				<uni-easyinput prefixIcon="person" type="text" v-model="loginForm.username" placeholder="请输入用户名" />
			</view>
			<view class="form-item">
				<uni-easyinput prefixIcon="locked" type="password" v-model="loginForm.password" placeholder="请输入密码" />
			</view>
			<button @click="handleLogin">登录</button>
			<view class="link-text" @click="switchPage('register')">注册账号</view>
			<view class="link-text" @click="switchPage('forgot')">忘记密码</view>
		</view>

		<!-- 注册 -->
		<view v-if="currentPage === 'register'">
			<view class="form-item">
				<uni-easyinput prefixIcon="person" type="text" v-model="registerForm.username" placeholder="请输入用户名" />
			</view>
			<view class="form-item">
				<uni-easyinput prefixIcon="email" type="text" v-model="registerForm.email" placeholder="请输入邮箱" />
			</view>
			<view class="form-item">
				<uni-easyinput prefixIcon="phone" type="text" v-model="registerForm.phone" placeholder="请输入手机号" />
			</view>
			<view class="form-item">
				<uni-easyinput prefixIcon="locked" type="password" v-model="registerForm.password"
					placeholder="请输入密码" />
			</view>
			<view class="form-item">
				<uni-easyinput prefixIcon="locked" type="password" v-model="registerForm.confirmPassword"
					placeholder="请确认密码" />
			</view>
			<button @click="handleRegister">注册</button>
			<view class="link-text" @click="switchPage('login')">返回登录</view>
		</view>

		<!-- 忘记密码 -->
		<view v-if="currentPage === 'forgot'">
			<view class="form-item">
				<uni-easyinput prefixIcon="person" type="text" v-model="forgotForm.username" placeholder="请输入用户名" />
			</view>
			<view class="form-item">
				<uni-easyinput prefixIcon="email" type="text" v-model="forgotForm.email" placeholder="请输入邮箱" />
			</view>
			<button @click="handleForgotPassword">找回密码</button>
			<view class="link-text" @click="switchPage('login')">返回登录</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {

		computed: {
			...mapState('m_user', ['token', 'userInfo'])
		},

		data() {
			return {
				logoImage: 'https://omo-oss-image.thefastimg.com/portal-saas/pg2024012615382844793/cms/image/a7a3a24e-fbd3-4a1d-9099-62b626eb1ec0.png_186xaf.png',
				currentPage: 'login', // 当前页面状态：login, register, forgot
				loginForm: {
					username: '',
					password: ''
				},
				registerForm: {
					username: '',
					email: '',
					phone: '',
					password: '',
					confirmPassword: ''
				},
				forgotForm: {
					username: '',
					email: ''
				}
			};
		},
		methods: {

			// 映射vuex中的方法，可以更新公共存储信息并持久化到本地内存
			...mapMutations('m_user', ['updateToken', 'updateUserInfo']),


			// 切换页面状态
			switchPage(page) {
				this.currentPage = page;
			},

			// 验证手机号是否合法
			validatePhone(phone) {
				const reg = /^1[3-9]\d{9}$/; // 11位手机号正则
				return reg.test(phone);
			},

			// 验证邮箱是否合法
			validateEmail(email) {
				const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 邮箱正则
				return reg.test(email);
			},


			// 处理登录
			async handleLogin() {
				const {
					username,
					password
				} = this.loginForm;
				if (!username || !password) {
					uni.showToast({
						title: '用户名和密码不能为空',
						icon: 'none'
					});
					return;
				}
				
				

				// const baseUrl = this.$baseurl
				// 请求后端登录接口
				const {
					data: res
				} = await uni.$http.post('/user/login', this.loginForm)
				if (res.code === '0') {
					
					//拼接处理下头像
					res.data.userInfo.avator = this.$baseurl + res.data.userInfo.avator
					console.log(res.data.userInfo.avator)

					this.updateToken(res.data.token)
					this.updateUserInfo(res.data.userInfo)

					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});


					setTimeout(() => {

						if ('ROLE_ADMIN' === res.data.userInfo.role) {
							uni.switchTab({
								url: '/pages/my/my'
							});
						} else {
							uni.switchTab({
								url: '/pages/home/home'
							});
						}

					}, 1000);
				}else{
					uni.$showMsg(res.msg)
				}
			}
		},

		// 处理注册
		async handleRegister() {
			const {
				username,
				password,
				email,
				phone,
				confirmPassword
			} = this.registerForm;
			if (!username || !email || !phone || !password || !confirmPassword) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
				return;
			}
			if (password !== confirmPassword) {
				uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none'
				});
				return;
			}

			if (!this.validatePhone(phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
				return;
			}
			if (!this.validateEmail(email)) {
				uni.showToast({
					title: '邮箱格式不正确',
					icon: 'none'
				});
				return;
			}

			// 注册接口
			const {
				data: res
			} = await uni.$http.post('/user/register', this.registerForm)
			if (res.code === '0') {
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				});
				setTimeout(() => {
					this.switchPage('login');
				}, 1000);
			}

		},

		// 处理找回密码
		async handleForgotPassword() {
			const {
				username,
				email
			} = this.forgotForm;
			if (!username || !email) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
				return;
			}

			// 模拟找回密码成功
			const {
				data: res
			} = await uni.$http.post('/user/forgot-password', this.forgotForm)
			if (res.code === '0') {
				uni.showToast({
					title: res.data,
					icon: 'success'
				});
				setTimeout(() => {
					// 根据角色跳转不同页面
					this.switchPage('login');
				}, 1000);
			} else {
				uni.$showMsg(red.data)
			}

		}
	};
</script>

<style lang="scss">
	.container {
		padding: 20px;
	}

	.form-item {
		margin-bottom: 20px;
	}

	uni-easyinput {
		width: 90%;
		height: 40px;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 0 20px;
	}

	input {
		width: 90%;
		height: 40px;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 0 20px;
	}

	button {
		width: 70%;
		height: 40px;
		background-color: #00B268;
		color: #fff;
		border-radius: 5px;
		margin-bottom: 20px;
		padding: 0 20px;
		border-radius: 20px;
	}

	.link-text {
		color: #007aff;
		text-align: center;
		margin-top: 10px;
		text-decoration: underline;
	}

	.logo {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;

		.logoImage {
			width: 180px;
			height: 90px;
		}
	}
</style>